<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转立方体</title>
	</head>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			/* border: 5px red solid; */
			perspective: 3000px;
			transform-style: preserve-3d;
		}
		ul{
			list-style: none;
			position: relative;
			transform-style: preserve-3d;
			margin: 40px auto;
			animation: move 3s infinite linear;
			transform-origin: center center 75px;
		}
		ul>li{
			width: 150px;
			height: 150px;
			opacity: 0.4;
			position: absolute;
			font-size: 50px;
			text-align: center;
			line-height: 150px;
				
		}
		ul>li:nth-of-type(1){
			background-color: red;
			
		}
		ul>li:nth-of-type(2){
			/* 右*/
			background-color: aqua;
			transform: translateX(150px) rotateY(270deg) ;
			transform-origin: left;
		}
		ul>li:nth-of-type(3){
			background-color: #555500;
			/* 左 */
			transform: translateX(-150px) rotateY(-270deg) ;
			transform-origin: right;
		}
		ul>li:nth-of-type(4){
			/* 下 */
			background-color: #55aa7f;
			transform: translateY(150px) rotateX(90deg) ;
			transform-origin: top;
		}
		ul>li:nth-of-type(5){
			/*  上*/
			background-color:#55aaff;
			transform: translateY(-150px) rotateX(-90deg);
			transform-origin: bottom;
		}
		ul>li:nth-of-type(6){
			/* 前 */
			background-color: #ffff00;
			transform: translateZ(150px)  ;
			
		}
		@keyframes move{
			from{
				transform: rotateY(0deg) rotateX(0);
			}
			to{
				transform:rotateY(360deg ) rotateX(360deg);
			}
		}
	</style>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>
